<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container p-5 mt-3 mb-3">
      <!-- 上传头像 -->
      <h6 class="text-left text-info border-bottom pb-2">上传头像</h6>
      <form class="mt-5" @submit.prevent="upload">
        <div class="form-group row mt-4">
          <label class="col-sm-2 col-form-label text-right">选择头像:</label>
          <div class="col-sm-10">
            <div class="custom-file">
              <input type="file" accept="image/png,image/gif,image/jpeg" class="custom-file-input" id="head-image" lang="es" required=""
              :class="{ 'is-invalid': errorImageMsg != '' }">
              <label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
              <div class="invalid-feedback">
                {{ errorImageMsg }}
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <div class="col-sm-2"></div>
          <div class="col-sm-10 text-center">
            <button type="submit" class="btn btn-info text-white form-control">立即上传</button>
          </div>
        </div>
      </form>
      <!-- 修改密码 -->
      <h6 class="text-left text-info border-bottom pb-2 mt-5">修改密码</h6>
      <form class="mt-5" @submit.prevent="resetPassword">
        <div class="form-group row mt-4">
          <label for="old-password" class="col-sm-2 col-form-label text-right">原密码:</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="old-password" placeholder="请输入原始密码!" required v-model="resetForm.oldPassword">
            <div class="invalid-feedback">
              {{ errorMsg.oldPasswordMsg }}
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="new-password" placeholder="请输入新的密码!" required v-model="resetForm.newPassword">
            <div class="invalid-feedback">
              {{ errorMsg.newPasswordMsg }}
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="confirm-password" placeholder="再次输入新密码!" required
            v-model="resetForm.confirmPassword" @input="changeConfirmMsg">
            <div class="invalid-feedback">
              {{ errorMsg.confirmPasswordMsg }}
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <div class="col-sm-2"></div>
          <div class="col-sm-10 text-center">
            <button type="submit" class="btn btn-info text-white form-control">立即保存</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import User from '@/api/user'
import router from '@/router'
import { useUserStore } from '@/store/modules/user'

const resetForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const errorMsg = ref({
  oldPasswordMsg: '',
  newPasswordMsg: '',
  confirmPasswordMsg: ''
})

const errorImageMsg = ref('')

const changeConfirmMsg = () => {
  if (resetForm.value.newPassword != resetForm.value.confirmPassword) {
    errorMsg.value.confirmPasswordMsg = '两次输入的密码不一致!'
  }
}

const userStore = useUserStore()

const upload = async () => {
  let formData = new FormData()
  formData.append('file', document.getElementById('head-image').files[0])
  await User.upload(formData).then((res) => {
    if ('errorMsg' in res) {
      errorImageMsg.value = res.errorMsg
    } else {
      userStore.headerUrl = res.headerUrl
      // 跳转到首页
      router.push('/')
    }
  })
}

const resetPassword = async () => {
  await User.resetPassword(resetForm.value.oldPassword, resetForm.value.newPassword).then((res) => {
    if (Object.keys(res).length > 0) {
      // 重置密码失败，显示错误信息
      console.log(res)
      errorMsg.value.oldPasswordMsg = res.oldPasswordMsg ?? ''
      errorMsg.value.newPasswordMsg = res.newPasswordMsg ?? ''
    } else {
      // 跳转到登录页
      router.push('login')
    }
  })
}
</script>
